<template>
    <div class="row">
        <div class="col-xs-12 form-text">
            <strong ref="strong" :class="inputnameclass">{{ inputName }}</strong>
            <input :type="inputType" class="form-control" @focus="focus_input" @blur="blur_input">
            <p>{{ explain }}</p>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                explain : '',
                inputnameclass : 'input_name_blur'
            }
        },
        props:{
            inputName:{
                type:String,
                default:'填写内容'
            },
            contentType:{
                type:String,
                default:'text'
            }
        },
        computed:{
            inputType: function(){
                let inputType = 'text'
                if(this.contentType == "pwd"){
                    inputType = 'password'
                }
                return inputType
            }
        },
        methods:{
            set_explain(){
                switch(this.contentType){
                    case 'email':
                        this.explain = '请输入邮箱'
                    break
                    case 'pwd':
                        this.explain = '请输入密码'
                    break
                    case 'tel':
                        this.explain = '请输入手机号'
                    break
                    case 'username':
                        this.explain = '请输入用户名'
                    break
                    default:
                        this.explain = '请根据要求填写'
                }
            },
            focus_input (e) {
                let input_value = e.target.value;
                let strong = e.target.parentNode.firstChild;
                if(input_value == ""){
                    this.inputnameclass = 'input_name_focus'
                    console.log('获得焦点时表单内容是空的')
                }else{
                    console.log('获得焦点时表单内容是：' + input_value)
                }
            },
            blur_input (e) {
                let input_value = e.target.value;
                let strong = e.target.parentNode.firstChild;
                let explain = e.target.parentNode.lastChild;
                if(input_value == ""){
                    this.inputnameclass = 'input_name_blur'
                    this.set_explain()
                    console.log('失去焦点时表单内容是空的')
                }else{
                    console.log('失去焦点时表单内容是：' + input_value)
                    switch(this.contentType){
                        case 'email':
                            if(input_value.indexOf("@") < 0 ){
                                this.explain = '邮箱格式不正确'
                            }else{
                                this.set_explain()
                            }
                        break
                    }
                    this.$emit('username', input_value)
                    this.$emit('password', input_value)
                }
            }
        },
        mounted: function () {
            this.set_explain()
        }
    }
</script>

<style scoped>
    .form-text{
        position: relative;
        margin: 10px 0 0 0 ;
        padding-top: 20px;
    }
    .form-text strong{
        position: absolute;
        z-index: 1;
        left: 15px;
        line-height: 20px;
        height: 20px;
        text-indent: 1em;
    }
    .input_name_focus{
        top: 0px;
        font-size: 8px;
        font-weight: normal;
        color: #aaa;
    }
    .input_name_blur{
        animation: myfirst 0.3s;
    }
    @keyframes myfirst
    {
        from {top: 30px;}
        to {top: 0px;}
    }
    .form-text input{
        position: relative;
        z-index: 99;
        height: 42px;
        background: none;
        border-radius: 30px;
    }
    .form-text p{
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        text-indent: 10px;
        color: #a94442;
    }
</style>